<template>
  <div class="csj-model">
    <Drawer
      title="添加活动"
      width="60%"
      v-model="isShowModel"
      @on-close="close"
    >
      <Form :model="formItem" :label-width="140" inline>
        <!-- 活动主页模块 -->
        <div class="f14 fw600 mb10 bgc pl20">活动主页</div>

        <FormItem label="活动名称">
          <Input
            class="wpx300"
            v-model="formItem.name"
            placeholder="请输入活动名称"
          />
        </FormItem>
        <br />
        <FormItem label="活动有效期">
          <DatePicker
            class="wpx140"
            type="datetime"
            :options="dateOptions"
            placeholder="活动开始时间"
            v-model="formItem.expire_begin_time"
          ></DatePicker>
          <span class="ml10 mr10 ca1a1a1">至</span>
          <DatePicker
            class="wpx140"
            type="datetime"
            :options="dateOptions"
            placeholder="活动结束时间"
            v-model="formItem.expire_end_time"
          ></DatePicker>
        </FormItem>
        <FormItem label="活动规则字体颜色">
          <Input
            class="wpx100"
            v-model="formItem.fs_color"
            placeholder="例如: #999999"
          />
        </FormItem>
        <div></div>
        <FormItem label="倒计时文字颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_font_color"
            placeholder="例如: #999999"
          />
        </FormItem>
        <div></div>
        <FormItem label="倒计时时间背景色">
          <Input
            class="wpx100"
            v-model="formItem.expire_background_color"
            placeholder="例如: #999999"
          />
        </FormItem>
        <div></div>
        <FormItem label="活动背景头图">
          <div class="h100 w100">
            <div class="csj-singe-upload wpx100">
              <csj-upload :isCut="false" v-model="formItem.background_image">
                <div class="csj-image-add" v-if="!formItem.background_image">
                  <Icon type="ios-add" class="f80" />
                </div>
                <img :src="imagePrefix(formItem.background_image)" />
              </csj-upload>
            </div>
          </div>
        </FormItem>
        <FormItem label="活动规则图">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <video
                class="w100 h100"
                :src="imagePrefix(formItem.rule_image)"
              ></video>
            </csj-upload>
          </div>
        </FormItem>
        <div></div>
        <FormItem label="分享文案">
          <Input
            class="wpx300"
            v-model="formItem.name"
            placeholder="请输入分享标题"
          />
        </FormItem>
        <div></div>
        <FormItem label="分享大图">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <!-- ****************精品推荐模块****************** -->
        <div class="f14 fw600 mb10 bgc pl20">精品推荐</div>
        <FormItem label="精品推荐">
          <div v-if="formItem.coupon_image_url.length === 0">
            <div class="xcol-box wpx150" @click="add('yhq')">
              <div class="zt-size-create-wpx50 tc">
                <span class="zt-iconfont zt-tianjia zt-size-add f18"></span>
              </div>
            </div>
          </div>
          <div
            v-else
            v-for="(item, index) in formItem.coupon_image_url"
            :key="index"
            class="mb10"
          >
            <div class="xbox" v-if="item">
              <div class="csj-singe-upload wpx100 inline">
                <csj-upload :isCut="false" v-model="item.coupon_image">
                  <div class="csj-image-add" v-if="!item.coupon_image">
                    <Icon type="ios-add" class="f80" />
                  </div>
                  <img :src="imagePrefix(item.coupon_image)" v-else />
                </csj-upload>
              </div>
              <div class="inline">
                <Input
                  class="wpx300 ml20"
                  v-model="item.coupon_url"
                  placeholder="请输入优惠券地址"
                />
              </div>

              <div class="xbox-1-5">
                <div class="xbox inline f20">
                  <div class="ml5 zt-size-mt1 cup">
                    <span
                      class="zt-iconfont zt-xiangshang ca1a1a1 f20"
                      v-if="index === 0"
                    ></span>
                    <span
                      class="zt-iconfont zt-xiangshang f20"
                      @click="up(index, 'yhq')"
                      v-else
                    ></span>
                  </div>
                  <div class="ml10 zt-size-mt1 cup">
                    <span
                      class="zt-iconfont zt-xiangxia ca1a1a1 f20"
                      v-if="index === formItem.coupon_image_url.length - 1"
                    ></span>
                    <span
                      class="zt-iconfont zt-xiangxia f20"
                      @click="down(index, 'yhq')"
                      v-else
                    ></span>
                  </div>
                  <div class="ml10 cup">
                    <span
                      @click="del(index, 'yhq')"
                      v-if="!item.id"
                      class="f18 zt-iconfont zt-jianshao zt-size-del"
                    ></span>
                    <span class="zt-iconfont zt-jianshao f18" v-else></span>
                  </div>
                  <div class="ml10 cup">
                    <span
                      class="zt-iconfont zt-tianjia f18"
                      @click="add('yhq')"
                    ></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </FormItem>
        <div></div>
        <FormItem label="底部页脚">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <div></div>
        <FormItem label="红包领取弹窗图">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <!-- 商品详情样式模块 -->
        <div class="f14 fw600 mb10 bgc pl20">商品详情样式</div>

        <FormItem label="优惠卷+按钮">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <div></div>
        <FormItem label="优惠卷倒计时字体颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_font_color"
            placeholder="例如: #333333"
          />
        </FormItem>
        <div></div>
        <FormItem label="倒计时色块颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_background_color"
            placeholder="例如: #333333"
          />
        </FormItem>
        <div></div>
        <FormItem label="特色小标签+精品标题">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <div></div>
        <FormItem label="一键抢购按钮">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <!-- 助力弹框页面模块 -->
        <div class="f14 fw600 mb10 bgc pl20">助力弹框页面</div>

        <FormItem label="标题文案">
          <Input
            class="wpx300"
            v-model="formItem.name"
            placeholder="请输入弹框标题"
          />
        </FormItem>
        <FormItem label="标题颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_font_color"
            placeholder="例如: #333333"
          />
        </FormItem>
        <div></div>
        <FormItem label="标语内容">
          <Input
            class="wpx300"
            v-model="formItem.name"
            placeholder="请输入标题内容"
          />
        </FormItem>
        <FormItem label="标语颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_font_color"
            placeholder="例如: #333333"
          />
        </FormItem>
        <div></div>
        <FormItem label="优惠卷倒计时字体颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_font_color"
            placeholder="例如: #333333"
          />
        </FormItem>
        <div></div>
        <FormItem label="优惠卷图">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <!-- 邀请弹窗页面模块 -->
        <div class="f14 fw600 mb10 bgc pl20">邀请弹框页面</div>

        <FormItem label="标语内容">
          <Input
            class="wpx300"
            v-model="formItem.name"
            placeholder="请输入标语内容"
          />
        </FormItem>
        <FormItem label="标语颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_font_color"
            placeholder="例如: #333333"
          />
        </FormItem>
        <div></div>
        <FormItem label="优惠卷倒计时字体颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_font_color"
            placeholder="例如: #333333"
          />
        </FormItem>
        <div></div>
        <FormItem label="优惠卷图">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <!-- 我的助力页面模块 -->
        <div class="f14 fw600 mb10 bgc pl20">我的助力页面</div>

        <FormItem label="优惠卷">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <div></div>
        <FormItem label="优惠卷倒计时字体颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_font_color"
            placeholder="例如: #333333"
          />
        </FormItem>
        <div></div>
        <FormItem label="倒计时色块颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_font_color"
            placeholder="例如: #333333"
          />
        </FormItem>
        <div></div>
        <FormItem label="邀请按钮">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <!-- 我的助力页面模块 -->
        <div class="f14 fw600 mb10 bgc pl20">好友助力页面</div>
        <FormItem label="标语内容">
          <Input
            class="wpx300"
            v-model="formItem.name"
            placeholder="请输入标语内容"
          />
        </FormItem>
        <FormItem label="标语颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_font_color"
            placeholder="例如: #333333"
          />
        </FormItem>
        <div></div>

        <FormItem label="优惠卷">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <div></div>
        <FormItem label="优惠卷倒计时字体颜色">
          <Input
            class="wpx100"
            v-model="formItem.expire_font_color"
            placeholder="例如: #333333"
          />
        </FormItem>
        <div></div>
        <FormItem label="助力按钮">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <!-- 助力成功+二次进入页面模块 -->
        <div class="f14 fw600 mb10 bgc pl20">助力成功+二次进入</div>
        <FormItem label="助力成功优惠卷">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
        <FormItem label="第二次进入优惠卷">
          <div class="csj-singe-upload wpx100">
            <csj-upload :isCut="false" v-model="formItem.rule_image">
              <div class="csj-image-add" v-if="!formItem.rule_image">
                <Icon type="ios-add" class="f80" />
              </div>
              <img :src="imagePrefix(formItem.rule_image)" />
            </csj-upload>
          </div>
        </FormItem>
      </Form>
      <div class="csj-drawer-footer">
        <Button @click="close">取消</Button>
        <Button @click="confirm" type="primary" class="ml10">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script lang="ts" src="./activity-add.ts"></script>
